<template>
  <div>
    <page-scroll :footer="false">
      <template #header>
        <gltitle
            :title="$t('lucky.doc22')"
            :is_name="true"
            :is_back="true"
            :is_lang="false"
            :is_kf="false"
            :is_right="false"
        ></gltitle>
      </template>
      <template #content>
        <div class="container">
          <EmptyData v-show="emptyShow" :text="$t('load.no_record')"/>
          <van-pull-refresh
              v-model="refreshing"
              :success-text="$t('load.refreshed')"
              @refresh="refreshData"
              head-height="50"
              v-if="!emptyShow"
          >

            <van-list
                v-model="loading"
                :finished="finished"
               
                :loading-text="$t('load.loading')"
                @load="loadData"
                :immediate-check="true"
            >
              <div class="record-list">
                <div
                    class="item"
                    :class="item.type"
                    v-for="item of recordList"
                    :key="item.id"
                >
                  <div class="item-left">
                    <div class="title">{{ item.remark }}</div>
                    <p>{{ $t("lucky.doc24", { n: item.count }) }}</p>
                  </div>
                  <div class="item-right">
                    {{ $t("lucky.doc26", { n: item.count }) }}
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </template>
    </page-scroll>
  </div>
</template>

<script>
import EmptyData from "@/components/public/EmptyData.vue";
import refreshList from "@/mixins/refreshList.js";

export default {
  components: {EmptyData},
  mixins: [refreshList],
  data() {
    return {
      emptyShow: false,
      recordList: []
    }
  },
  created() {
    this.firstEnter = true
  },
  activated() {
    if (this.firstEnter) {
      return this.firstEnter = false
    }
    this.onTab()
  },
  methods: {
    async getRecordList() {
      let url = this.URL.lucky.countrecord
      let {page, pageSize} = this
      let params = {page, pageSize,type:0}

      let {data, code, message} = await this.$post(url, params).catch((err) => {
        this.$toast(err.message)
        this.emptyShow = this.recordList.length == 0
      });
      if (code == 1005) {
        setTimeout(() => {
          this.getRecordList()
        }, 500)
        return;
      }
      if (code != 0) return this.$toast(message);

      this.recordList.push(...data.list)
      this.emptyShow = this.recordList.length == 0
      this.judgement(data.list.length, data.page.totalPage)
    },
    /**
     * 继续加载数据列表
     */
    loadData() {
      this.getRecordList()
    },
    /**
     * 重新加载页面
     */
    refreshData() {
      this.refreshInit()
      this.recordList = []
      this.getRecordList()
    },
    onTab() {
      this.initData()
      this.recordList = []
      this.getRecordList()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .head {
  background: #121622 !important;
}

.record-list {
  //padding: 0 .24rem;
  margin-top: .2rem;
  .item {
    position: relative;
    margin-bottom: 0.32rem;
    border-radius: 0.24rem;
    background: #1b202d;
    padding: 0.32rem 0.28rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-bottom: 0;
    }
    .item-left {
      min-width: 0;
      flex: 1;
      .title {
        color: #FFF;
        font-size: 0.28rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1em;
      }
      p {
        margin-top: 0.24rem;
        color: #BDBDBD;
        font-size: 0.26rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1em;
      }
    }
    .item-right {
      flex: 0 0 auto;
      margin-left: 0.2rem;
      color: #096DFD;
      text-align: right;
      font-size: 0.26rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1em;
    }



  }
}
</style>


















